<template>
	<view>
		<Tabs 
		  :activeKey="active"
		  @change="handleChange"
			showIndicator
		>
		<TabPane key="1" title="正常">
		  <SearchList
		  	ref="searchList"
		  	placeholder="搜索代理商、用户名、手机号、所属地区"
		  	showTotal
		  	:searchApi="getCustomerList"
		  	:other="{status: ''}"
		  	boxHeight="calc(100vh - 44px)"
		  	@update="updateList"
		  >
		  	<template v-slot:list>
		  		<view class="customer_item" v-for="(item,index) in customerList" :key="index" :title="item.name">
		  			<view class="customer_head">
		  				<image class="customer_img" src="/static/img/person.png" mode="widthFix"></image>
		  				<view class="customer_text">
		  					<view class="customer_name">
		  						<view class="uni-main-color">{{item.userName}}</view>
		  						<text class="uni-secondary-color">{{item.sex}} . {{item.age+'岁'}}</text>
		  					</view>
		  					<view v-if="item.updateTime" class="customer_date uni-extra-color">更新于 {{item.updateTime?item.updateTime:''}}</view>
		  					<view v-if="!item.updateTime && item.createTime" class="customer_date uni-extra-color">登记于 {{item.createTime}}</view>
		  				</view>
		  			</view>
		  			<view class="customer_other">
		  				<view class="customer_mobile assist_gold">{{item.mobile}}</view>
		  				<view class="customer_address uni-secondary-color">{{item.homeAddress}}</view>
		  				<view class="customer_office">
		  					{{item.officeName?item.officeName:''}} {{item.saleName?item.saleName+'的客户':''}}
		  				</view>
		  			</view>
		  		</view>
		  </template>
		  </SearchList>
		</TabPane>
		<TabPane key="2" title="废弃">
		  <SearchList
		  	ref="searchList"
		  	placeholder="搜索代理商、用户名、手机号、所属地区"
		  	showTotal
		  	:searchApi="getCustomerList"
		  	:other="{status: 1}"
		  	boxHeight="calc(100vh - 44px)"
		  	@update="updateList"
		  >
		  	<template v-slot:list>
		  		<view class="customer_item" v-for="(item,index) in customerList" :key="index" :title="item.name">
		  			<view class="customer_head">
		  				<image class="customer_img" src="/static/img/person.png" mode="widthFix"></image>
		  				<view class="customer_text">
		  					<view class="customer_name">
		  						<view class="uni-main-color">{{item.userName}}</view>
		  						<text class="uni-secondary-color">{{item.sex}} . {{item.age+'岁'}}</text>
		  					</view>
		  					<view v-if="item.updateTime" class="customer_date uni-extra-color">更新于 {{item.updateTime?item.updateTime:''}}</view>
		  					<view v-if="!item.updateTime && item.createTime" class="customer_date uni-extra-color">登记于 {{item.createTime}}</view>
		  				</view>
		  			</view>
		  			<view class="customer_other">
		  				<view class="customer_mobile assist_gold">{{item.mobile}}</view>
		  				<view class="customer_address uni-secondary-color">{{item.homeAddress}}</view>
		  				<view class="customer_office">
		  					{{item.officeName?item.officeName:''}} {{item.saleName?item.saleName+'的客户':''}}
		  				</view>
		  			</view>
		  		</view>
		  </template>
		  </SearchList>
		</TabPane>
		</Tabs>
	</view>
</template>

<script setup>
	import userInfoStore from '@/store/modules/user'
	import Tabs from '@/components/Tabs.vue';
	import {
		loginWithThirdToken,
		getCustomerList
	} from '@/service/apis/user'
	import SearchList from '@/components/SearchList.vue'
	import hx from '@/uni_modules/hxjz-hx'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onReady,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const userInfo = userInfoStore()
	const searchList = ref(null)
	const customerList = ref([])
	const active = ref('1');
	const handleChange = (key) => {
	  active.value = key;
	  console.log('基础用法标签切换：', key);
	};
	loginWithThirdToken({
			id: '123456788',
			type: '1'
		})
		.then(res => {
			const {
				accessToken,
				offices,
				products
			} = res
			userInfo.setToken(accessToken)
			userInfo.setOffices(offices)
			userInfo.setProducts(products)
			userInfo.setUserInfo(res.userInfo)
		})
	onMounted(() => {
		if (searchList.value) {
			searchList.value && searchList.value.getList()
		}
		console.log(uni.getWindowInfo())
	})
	const updateList = (list) => {
		customerList.value = list || []
	}
</script>

<style lang="scss">
	.customer_item {
		display: block;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20px;
	}
	.customer_head {
		display: flex;
	}
	.customer_img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 50rpx;
		background: #e7e7e7;
	}
	.customer_text {
		width: calc(100% - 120rpx);
	}
	.customer_date {
		margin-top: 6rpx;
		font-size: 26rpx;
	}
	.customer_name {
		display: flex;
		align-items: center;
		view {
			font-size: 34rpx;
		}
		text {
			font-size: 24rpx;
			padding-left: 20rpx;
		}
	}
	.customer_other {
		margin-top: 10rpx;
	}
	.customer_office {
		padding-top: 10rpx;
		margin-top: 10px;
		display: block;
		font-size: 26rpx;
		border-top: 1rpx solid #d5d5d5;
		color: #444;
	}	
</style>